import React, {useEffect, useState} from 'react';
import StatisticCards from "@/pages/Panel/ProductionLinePanel/component/StatisticCards";
import StepProductDetail from "@/pages/Panel/ProductionLinePanel/component/StepProductDetail";
import {Button, Flex, Select, Space, Typography} from 'antd';
import AchievingRate from "@/pages/Panel/ProductionLinePanel/component/charts/AchievingRate";
import EfficiencyCurve from "@/pages/Panel/ProductionLinePanel/component/charts/EfficiencyCurve";
import WIPDistribution from "@/pages/Panel/ProductionLinePanel/component/charts/WIPDistribution";
import {listProductionLineByMonthlyPlanningUsingGET} from "@/services/model/productionLineController";
import {useModel} from "@@/exports";
import {
  getStatisticCardsUsingGET,
  listEfficiencyCurveCharUsingGET,
  listStepProductDetailUsingGET
} from "@/services/model/productionPanelController";
import {FolderOpenOutlined} from "@ant-design/icons";
const { Title ,Paragraph, } = Typography;
const ProductionLinePanel: React.FC = () => {

  const {initialState} = useModel('@@initialState');
  const baseStyle: React.CSSProperties = {
    borderRadius: "3px",
    border: "1px solid rgb(240, 240, 240)",
    backgroundColor: initialState?.settings?.navTheme === "realDark" ? "rgb(20, 20, 20)" : "white",
    padding: 8,
    marginBottom: 10
  };
  const [selectItems, setSelectItems] = useState<{ value: string, label: string }[]>();
  const [selectProductionLine, setSelectProductionLine] = useState<API.ProductionLineDTO>({code: 'A1', name: 'COC组'});
  const [statisticCards, setStatisticCards] = useState<API.StatisticCardsDTO>();
  const [stepProductDetail, setStepProductDetail] = useState<API.StepProductDetailDTO[]>([]);
  const [efficiencyCurve, setEfficiencyCurve] = useState<API.EfficiencyCurveCharDTO[]>([]);
  const handleChange = (value: string, option: any) => {
    setSelectProductionLine({code: option.value, name: option.label})
  }
  useEffect(() => {
    listProductionLineByMonthlyPlanningUsingGET({
      commitUserId: initialState?.currentUser?.id,
    }).then((result) => {
      if (result.code === 0 && result.data) {
        const selectItemsTemp: { value: string, label: string }[] = [];
        result.data.forEach(item => {
          if (item.name && item.code) {
            selectItemsTemp.push({value: item.code, label: item.name})
          }
        })
        setSelectItems(selectItemsTemp);
      }
    });
  }, []);
  useEffect(() => {
    getStatisticCardsUsingGET({
      productionLineCode: selectProductionLine?.code,
    }).then(res => {
      if (res.code === 0) {
        setStatisticCards(res.data)
      }
    })
    listStepProductDetailUsingGET({
      productionLineCode: selectProductionLine?.code,
    }).then(res => {
      if (res.code === 0 && res.data) {
        setStepProductDetail(res.data)
      } else {
        setStepProductDetail([])
      }
    })
    listEfficiencyCurveCharUsingGET({
      productionLineCode: selectProductionLine?.code,
    }).then(res => {
      if (res.code === 0 && res.data) {
        setEfficiencyCurve(res.data)
      } else {
        setEfficiencyCurve([])
      }
    })
  }, [selectProductionLine?.code]);

  return (
    <div>
      <Flex justify={"space-between"}>
        <Title level={2}>{selectProductionLine?.name}</Title>
        <div>
          <Select
            popupMatchSelectWidth={200}
            onChange={(value, option) => handleChange(value, option)}
            defaultValue="A1"
            style={{width: 150}}
            bordered={false}
            options={selectItems}
          />
        </div>
      </Flex>
      <StatisticCards statisticCards={statisticCards}/>
      <StepProductDetail stepProductDetail={stepProductDetail}/>
      <div>
        <Flex gap="small" vertical={false}>
          <AchievingRate key={"AchievingRate"} baseStyle={baseStyle} stepProductDetail={stepProductDetail}/>
          <WIPDistribution key={"WIPDistribution"} baseStyle={baseStyle} stepProductDetail={stepProductDetail}/>
        </Flex>
        {/*<EfficiencyCurve key={"EfficiencyCurve"} baseStyle={baseStyle} efficiencyCurve={efficiencyCurve}/>*/}
      </div>
      <Space>
        <Button type="default" icon={<FolderOpenOutlined />} size={"large"} onClick={() => {
          window.open('./readme.pdf');
        }}>
          产线电子看板-录入数据文档
        </Button>
      </Space>
    </div>
  );
};

export default ProductionLinePanel;
